<script setup lang="ts">
import { useRoleForm } from './hook'
import { watch } from 'vue'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
  },
  menuOptions: {
    type: Array,
  },
  checkedKeys: {
    type: Array,
  },
  data: {
    type: Object,
    default: () => {
      return {}
    },
  },
})
const emit = defineEmits(['update:visible', 'refresh'])
const {
  rules,
  title,
  formData,
  menuRef,
  menuOptions,
  checkedKeys,
  menuExpand,
  menuNodeAll,
  ruleFormRef,
  formVisible,
  sys_normal_disable,
  submitForm,
  closeDialog,
  handleCheckedTreeNodeAll,
  handleCheckedTreeExpand,
  handleCheckedTreeConnect,
} = useRoleForm(props, emit)

watch(
  () => checkedKeys.value,
  (val) => {
    menuRef.value?.setCheckedKeys(val)
  }
)
</script>

<template>
  <el-dialog
    v-model="formVisible"
    :title="title"
    :width="500"
    draggable
    :before-close="closeDialog"
  >
    <!-- 表单内容 -->
    <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="100px">
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="formData.roleName" placeholder="请输入角色名称" />
      </el-form-item>
      <el-form-item label="权限字符" prop="roleKey">
        <el-input v-model="formData.roleKey" placeholder="请输入权限字符" />
      </el-form-item>
      <el-form-item label="角色顺序" prop="roleSort">
        <el-input-number v-model="formData.roleSort" controls-position="right" :min="0" />
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="formData.status">
          <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{
            dict.label
          }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="菜单权限">
        <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')"
          >展开/折叠</el-checkbox
        >
        <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')"
          >全选/全不选</el-checkbox
        >
        <el-checkbox
          v-model="formData.menuCheckStrictly"
          @change="handleCheckedTreeConnect(formData, $event, 'menu')"
          >父子联动</el-checkbox
        >
        <el-tree
          ref="menuRef"
          class="border w-full border-gray-200 mt-2 rounded bg-white"
          :data="menuOptions"
          show-checkbox
          node-key="id"
          :check-strictly="!formData.menuCheckStrictly"
          empty-text="加载中，请稍候"
          :props="{ label: 'label', children: 'children' }"
        />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)"> 确定 </el-button>
    </template>
  </el-dialog>
</template>
